<template>
  <div class="content-box" :class="{ 'nobottom-btn': !showbtn }">
    <div class="box-title">
      <img :src="getPicAssetURL(images)" />
      <span>{{ title }}</span>
    </div>
    <div class="box-main">
      <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
        <el-tab-pane label="水文" name="first">
          <!-- <ul v-if="showList">
            <li :class="['item-li', currentLi === index ? 'active' : '']" :key="index" v-for="(item, index) in dataList"
              @click="clickLi(item, index)">
              <span>{{ item.title }}</span>
            </li>
          </ul> -->
          <!-- <el-tabs class="smallGroup" type="card" v-model="groupName" stretch @tab-click="handle2Click">
            <el-tab-pane label="计算区" name="group1">
              <ul v-if="showList" class="ul-box">
                <li :class="['item-li', currentLi === index ? 'active' : '']" :key="index"
                  v-for="(item, index) in calcGroup1" @click="clickLi(item, index)">
                  <span>{{ item.title }}</span>
                </li>
              </ul>
              <slot v-else></slot>
            </el-tab-pane>
            <el-tab-pane label="计算组" name="group2">
              <ul v-if="showList">
                <li :class="['item-li', currentLi === index ? 'active' : '']" :key="index"
                  v-for="(item, index) in calcGroup2" @click="clickLi(item, index)">
                  <span>{{ item.title }}</span>
                </li>
              </ul>
              <slot v-else></slot>
            </el-tab-pane>
          </el-tabs> -->
          <!-- <slot v-else></slot> -->
        </el-tab-pane>
        <el-tab-pane label="水动力" name="second">
          <!-- <el-tabs class="smallGroup" type="card" v-model="groupName" @tab-click="handle2Click">
            <el-tab-pane label="计算区" name="group3"> -->
          <ul v-if="showList">
            <li :class="['item-li', currentLi === index ? 'active' : '']" :key="index"
              v-for="(item, index) in calcGroup3" @click="clickLi(item, index)">
              <span>{{ item.title }}</span>
            </li>
          </ul>
          <slot v-else></slot>
          <!-- <slot v-else></slot>
            </el-tab-pane>
          </el-tabs> -->
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="box-btn" v-show="showbtn" @click="handleAdd(item, index)">
      <div class="btn-box">
        <span>{{ btnName }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { getPicAssetURL } from '@/utils/loadAssets'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  dataList: {
    type: Object,
    default: () => ({})
  },
  images: {
    type: String,
    default: ''
  },
  btnName: {
    type: String,
    default: ''
  },
  showbtn: {
    type: Boolean,
    default: true
  },
  showList: {
    type: Boolean,
    default: true
  }
})
const activeName = ref('first') //first
const groupName = ref('group1')

const calcGroup1 = ref([
  { title: '崅峪桥以上区域', id: 1 },
  { title: '楼德以上区域', id: 2 },
  { title: '崅峪桥北望区域', id: 3 },
  { title: '北望区域', id: 4 },
  { title: '东平湖单元组', id: 5 },


])
const calcGroup2 = ref([
  { title: '角峪桥单元组', id: 1 },
  { title: '楼德单元组', id: 2 },
  { title: '北望单元组', id: 3 },
  { title: '尚庄炉单元组', id: 4 },
  { title: '东平湖单元组', id: 5 }
])
const calcGroup3 = ref([
 { title: '崅峪桥以上区域', id: 1 },
  { title: '楼德以上区域', id: 2 },
  { title: '崅峪桥北望区域', id: 3 },
  { title: '北望区域', id: 4 },
  { title: '东平湖单元组', id: 5 },

])
const currentLi = ref(null)
const state = reactive({})
const emit = defineEmits(['clickLi'], ['handleAdd'])
const clickLi = (item, index) => {
  currentLi.value = index
  emit('clickLi', item)
}

const handleAdd = (item, index) => {
  emit('handleAdd', activeName.value)
}
function defineChecked() {
  // currentLi.value = 0
}
function handleClick(tab, event) {
  console.log(tab, event)
}
function handle2Click(tab, event) {
  console.log(tab, event)
}
defineExpose({ clickLi, defineChecked })
</script>
<style lang="less" scoped>
// .ul-box {
//   height: 100%;
//   overflow-y: auto;
// }
.content-box {
  height: 350px;
  width: 200px;
  border: 1px solid #149bd5;
  .box-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #149bd5;
    height: 34px;
    box-sizing: border-box;
    background: white;
    opacity: 0.8;
    img {
      position: absolute;
      left: 10px;
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
    span {
      color: #0154db;
      font-size: 14px;
      font-weight: bold;
    }
  }
  .box-main {
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.7);
    height: calc(100% - 64px);
    ul {
      height: 180px;
      overflow-y: auto;
      font-size: 14px;
      .item-li {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 35px;
        cursor: pointer;
        span {
          color: #797979;
        }
      }
      .item-li.active {
        span {
          color: #0154db;
        }
      }
    }
  }
  .box-btn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    font-size: 14px;
    background: rgba(22, 155, 213, 1);
    cursor: pointer;
    span {
      color: white;
    }
  }
}
.nobottom-btn {
  .box-main {
    height: calc(100% - 35px);
  }
}
// :deep(.el-tabs__header) {
//   padding-left: 20px;
// }
.smallGroup {
  :deep(.el-tabs__header) {
    padding-left: 0;
  }
  :deep(.el-tabs__item) {
    font-size: 14px;
    padding: 0 11px;
  }
}
</style>
